<template>
  <div>
    <el-form
      :model="form"
      label-position="right"
      ref="formRef"
      :rules="formRules"
      disabled
      class="borderNone"
    >
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="编号">
            <el-input
              v-model="form.number"
              placeholder="不输入则自动生成"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="产品中文名称" required>
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="产品英文名" required>
            <el-input v-model="form.englishName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="产品类别">
            <el-input v-model="form.mtlKindName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="中文单位" required>
            <el-input v-model="form.unitName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="英文单位" required>
            <el-input v-model="form.subUnitName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="订舱英文名" required>
            <el-input v-model="form.bookingSpaceEnName"> </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="所属客户">
            <el-input v-model="form.custName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="报关中文名" required>
            <el-input v-model="form.customsDeclarationName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="报关英文名" required>
            <el-input v-model="form.customsDeclarationEnName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="包装规格" required>
            <el-input v-model="form.spec"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="包装要求" required>
              <el-input v-model="form.packing"></el-input>
            </el-form-item>
          </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="长" required>
            <el-input v-model="form.length"  />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="宽" required>
            <el-input v-model="form.lwidth"  />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="高" required>
            <el-input v-model="form.high"  />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="体积">
              <el-input v-model="volume" disabled/>
            </el-form-item>
          </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="净重" required>
            <el-input v-model="form.netWeight"  />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="毛重" required>
            <el-input v-model="form.grossWeight"  />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="退税率" required>
            <el-input style="width: 50%" v-model="form.refundedTax">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="HS Code" required>
            <el-input v-model="form.hscode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="危险品类别" required>
            <el-input v-model="form.dangerousKind"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="结算成本价" required>
            <el-input v-model="form.price"  />
          </el-form-item>
        </el-col> -->
        <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="最小单位容量" required>
              <el-input-number v-model="form.minUnitCapacity"  />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
            <el-form-item label="最小单位数量" required>
              <el-input-number v-model="form.minUnitQty" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="form.status"
              size="large"
              inline-prompt
              :active-icon="Check"
              :inactive-icon="Close"
              active-value="normal"
              inactive-value="disable"
            />
          </el-form-item>
        </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="质量指标" required>
            <div style="display: flex; flex-direction: column;width: 100%;">
              <el-input v-model="form.qualityIndexName"></el-input>
              <el-input
                style="margin-top: 10px"
                v-model="form.qualityIndexRemark"
                type="textarea"
                disabled
              ></el-input>
            </div>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form-item label="包装质量要求" required>
            <div style="display: flex; flex-direction: column;width: 100%;">
              <el-input v-model="form.packingRequestName"></el-input>
              <el-input
                style="margin-top: 10px"
                v-model="form.packingDetail"
                type="textarea"
                disabled
              ></el-input>
            </div>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <div class="button-position">
      <el-button @click="updateVisible">取 消</el-button>
      <el-button type="primary" @click="addDept(formRef)">确 定</el-button>
    </div>
  </div>
</template>


<script setup>
import { reactive, ref, onMounted ,computed} from "vue";
import { ElNotification } from "element-plus";
import Api from "@/api/model/pm";
import tool from "@/utils/tool";
const emit = defineEmits(["updatetable"]);
const props = defineProps({
  paramsData: {
    type: Object,
    defalut: {},
  },
});

// 添加用户数据的对象
const form = ref({});
const formRef = ref();
const volume = computed(()=>{
  return tool.formatRoundNum(form.value.high*form.value.width*form.value.length,3)
})
onMounted(() => {
  getInit();
});

const updateVisible = () => {
  emit("updatetable");
};

const getInit = async () => {
  let res = await Api.product.detail.post(props.paramsData);
  console.log(res);
  if (res.code == "200") {
    form.value = res.data;
  }
};
</script>

<style lang="less" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
      inset;
    cursor: default;
    background-color: transparent; //背景颜色透明
    border-bottom: 1px solid #999;
    border-radius: 0;

    .el-input__inner {
      cursor: default !important;
    }
  }
  :deep(.el-textarea__inner) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
      inset;
    cursor: default;
    background-color: transparent; //背景颜色透明
    border-bottom: 1px solid #999;
    border-radius: 0;
  }
}
</style>

